<template>
  <BasicModal v-bind="$attrs" @register="registerModal" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
    <div v-if="isUpdate && columnM2mButton.length > 0" class="card-container">
      <Tabs v-model:activeKey="activeKey" type="card">
        <TabPane
          v-for="(cmButton, idx) in columnM2mButton"
          style="max-width: 100%"
          :key="idx"
          :tab="cmButton.name"
        >
          <AnnoM2m :data="m2mRecord" :is-add="false" :option="cmButton"></AnnoM2m>
        </TabPane>
      </Tabs>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { FormSchema } from '@/components/Table';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { IColumnBtn } from '@/api/sys/model/entitysModel';
  import AnnoM2m from '@/components/AnnoM2m/AnnoM2m.vue';
  import { useAppInject } from '@/hooks/web/useAppInject';
  defineOptions({ name: 'AnnModal' });

  const emit = defineEmits(['success', 'register']);
  interface Prop {
    addSchema: FormSchema[];
    editSchema: FormSchema[];
    columnM2mButton: IColumnBtn[];
    rowKey: String,
  }
  const { getIsMobile } = useAppInject();
  const props = defineProps<Prop>();
  const isUpdate = ref(true);
  const rowId = ref('');
  const activeKey = ref(0);
  const m2mRecord = ref();
  let currentState: 'add' | 'edit' | unknown = null;
  const [registerForm, { setFieldsValue, resetSchema, resetFields, validate }] = useForm({
    labelWidth: 100,
    baseColProps: { span: 24 },
    schemas: [],
    rowProps: { gutter: 16, justify: 'start' },
    labelAlign: 'left',
    showActionButtonGroup: false,
    showResetButton: false,
    showSubmitButton: false,
    actionColOptions: {
      span: 23,
    },
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    resetFields();
    isUpdate.value = !!data?.isUpdate;
    setModalProps({ confirmLoading: false, title: data?.isUpdate ? '编辑' : '新增', width: 960,defaultFullscreen: getIsMobile.value });
    if (unref(isUpdate)) {
      if (currentState != 'edit') {
        await resetSchema(props.editSchema);
      }
      rowId.value = data.record[props.rowKey];
      nextTick(() => {
        setFieldsValue({
          ...data.record,
        });
        m2mRecord.value = data.record;
      });

      currentState = 'edit';
    } else {
      if (currentState != 'add') {
        await resetSchema(props.addSchema);
      }
      currentState = 'add';
    }
  });

  async function handleSubmit() {
    try {
      const values = await validate();
      setModalProps({ confirmLoading: true });
      let finalValue = { ...values };
      finalValue[props.rowKey] = rowId.value;
      emit('success', {
        isUpdate: unref(isUpdate),
        values: finalValue,
        closeModal: closeModal,
      });
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
